<template>
	<div class="seckill-edit">
		<div class="wrap">
			<div class="input-wrap">
				<span class="input-name">收件人</span>
				<input type="text"  placeholder="真实姓名">
			</div>

			<div class="input-wrap">
				<span class="input-name">手机号</span>
				<input type="text" placeholder="下次下单会使用该地址">
			</div>

			<div class="input-wrap">
				<span class="input-name">所在地</span>
				<div class="city-wrap" @click="city()">
					<p class="city-value">省/市/区</p>
					<img src="../../assets/images/arrow.png">
				</div>
			</div>

			<div class="input-wrap">
				<span class="input-name">详细地址</span>
				<input type="text" placeholder="街道、楼牌号等（不少于15字）">
			</div>
		</div>
		<div class="wrap default">
			<div class="input-wrap ">
				<span class="input-name">设为默认</span>
				<div class="city-wrap">
					<p>下次下单会使用该地址</p>
					<div class="mint-switch">
						<input type="checkbox" class="mint-switch-input"> 
						<span class="mint-switch-core"></span> 
					</div>
				</div>
			</div>
		</div>
	</div>
	


		
		
</template>

<script type="text/javascript">
import Vue from 'vue';
import selectCity from './select-city';
export default {
	  methods: {
	  	city:function(){
	  		document.getElementsByClassName("select-city")[0].style.bottom="0";
	  		document.getElementsByClassName("mask")[0].style.display="block";
	  	}
	  }
}
	

</script>


<style lang="scss">
	@import "../../assets/css/_functions.scss";	
	@import "../../assets/css/_variables.scss";	
.seckill-edit{ 
	.wrap{
		background: $_fff;
		overflow: hidden;
	}
	width: rem(375);
	height: auto; 
	overflow: hidden;  
	.input-wrap{
		width: rem(360);
		height: rem(44);
		display:block;
		float: right;
		line-height: rem(44);
		border-bottom: 1px solid #dedede;

		>*{ 
			display:block;
		    float: left; 
		    overflow: hidden; 
		    line-height: rem(44);
		}
		span{ 
			width: rem(75);
			text-align: left;
			font-size:14px;
			color:#333333;
			
		}
		input{
			width: rem(285);
			border:none;
			margin-top: rem(1);
			line-height: rem(42);
			color:#333333;
			font-size: rem(14);
		}
		.city-wrap{
			width: rem(285);
			margin-top: rem(1);
			line-height: rem(42);
			overflow: hidden;
			display:flex;
			justify-content:space-between;
			p{
				font-size: rem(14);
				color:#cccccc;
				opacity: 0.8;
			}
			img{
				margin-top: rem(15);
				margin-right: rem(15);
				width: rem(8);
				height: rem(13);
			}
		}
	}
	:last-child{
		border-bottom: none !important;
	}
	.default{
		margin-top: rem(15);
	}
}

.mint-switch {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content:space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: relative;
    margin-right: rem(15);
}
.mint-switch-label {
    margin-left: rem(10);
    display: inline-block
}
.mint-switch-label:empty {
    margin-left: 0
}
.mint-switch-core {
    position: relative;
    width: rem(52) !important;
    height: rem(32);
    border: 1px solid #d9d9d9;
    border-radius: rem(16);
    box-sizing: border-box;
    background: #d9d9d9
}
.mint-switch-core::after, .mint-switch-core::before {
    content: " ";
    top: 0;
    left: 0;
    position: absolute;
    -webkit-transition: -webkit-transform .3s;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    border-radius: rem(15)
}
.mint-switch-core::after {
    width: rem(30);
    height: rem(30);
    background-color: #fff;
    box-shadow: 0 rem(1) rem(3) rgba(0, 0, 0, .4)
}
.mint-switch-core::before {
    width: rem(50);
    height: rem(30);
    background-color: #fdfdfd
}
.mint-switch-input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    outline: 0;
    width: rem(52)!important;
    height: rem(32);

    position: absolute;
    z-index: 1
}
.mint-switch-input:checked + .mint-switch-core {
    border-color: #44DB5E;
    background-color: #44DB5E
}
.mint-switch-input:checked + .mint-switch-core::before {
    -webkit-transform: scale(0);
            transform: scale(0)
}
.mint-switch-input:checked + .mint-switch-core::after {
    -webkit-transform: translateX(rem(20));
            transform: translateX(rem(20))
}



input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
font-weight: 100;
color:#cccccc;
font-size:rem(14);
letter-spacing:-0.34px;
}


// input:-moz-placeholder, textarea:-moz-placeholder {
// font-family: PingFang-Medium,PingFangSC-Regular,Helvetica;
// font-weight: 100;
// color:#cccccc;
// font-size:rem(14);
// }
// input::-moz-placeholder, textarea::-moz-placeholder {
// font-family: PingFang-Medium,PingFangSC-Regular,Helvetica;
// font-weight: 100;
// color:#cccccc;
// font-size:rem(14);
// }
// input:-ms-input-placeholder, textarea:-ms-input-placeholder {
// font-family: PingFang-Medium,PingFangSC-Regular,Helvetica;
// font-weight: 100;
// color:#cccccc;
// font-size:rem(14);
// } 


</style>